<template>
	<view class="content  u-skeleton">
		<view class="top u-skeleton-rect">
			<view class="left u-flex ">
				<view class="u-flex u-margin-right-10">
					<view>{{userAddress}}</view>
					<!-- <view class="u-margin-left-10">
						<u-icon name="arrow-down"></u-icon>
					</view> -->
				</view>
				<view class="shu">
				</view>
				<view class="sereaInput" @click="search">
					<u-icon name="search"></u-icon>
					<text style="color: #797979;margin-left: 20rpx;">搜索您想要的工作</text>
				</view>
			</view>
			<view @click="checkIdentity('/pages/issueWork/index',2)" class=" u-text-center " style="color: #fff;">
				发布招工
			</view>
		</view>
		<!--  -->
		<view class="u-padding-30 u-margin-bottom-10 u-skeleton-rect" style="background: #fff;">
			<u-swiper :list="banner" name="cover" height="260" mode="dot" @click="clkBanner"></u-swiper>
		</view>

		<!--  -->
		<view style="padding: 0 30rpx;background: #fff;">
			<u-grid :col="5" :border="false">
				<u-grid-item @click="ClkClassifty(item)" v-for="(item,index) in Classifty" :key="index" style="position: relative;">
					<view class="u-skeleton-rect">
						<u-image :src="item.cover" width="120" height="120" border-radius="20"></u-image>
					</view>
					<button open-type="contact" class="custom-btn"  v-if="item.link=='wx'"></button>
					<view class="u-margin-top-10">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!--  -->
		<view style="background: #f1f1f1;padding: 10rpx 20rpx;" class="u-skeleton-rect">
			<u-tabs bg-color="transparent" :list="typeList" active-color="#3C97FF" :current="current"
				@change="Ccurrent">
			</u-tabs>
		</view>

		<!--  -->
		<view style="background: #fff;" class="u-skeleton-rect">
			<workList :list="list" v-if="!current" ></workList>

			<manList :list="list" v-if="current"></manList>
		</view>



		<view v-if="list.length>9" @click="more"
			style="color:#3C97FF ; background: #fff;text-align: center;margin-top: 40rpx;padding: 30rpx;">查看更多招工信息
		</view>

		<identityBtn></identityBtn>




		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF" el-color="#ddd"></u-skeleton>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import check from '@/common/check.js';
	export default {

		data() {
			return {
				loading: true,
				banner: [{}],
				list: [{}, {}, {}, {}, {}],
				Classifty: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
				typeList: [{
					name: "找工作"
				}, {
					name: "找工人"
				}],
				current: 0,
				type: 2
			}
		},
		computed: {
			...mapState(['userAddress'])
		},

		onLoad() {
			this.getBanner()

			this.getClassify()


			this.getjob()
		},
		methods: {
			...mapMutations(['SET_CLASS']),

			checkIdentity(page, Identity) {
				check.checkIdentity(page, Identity).then(res => {
					console.log(res)
				})
			},
			ClkClassifty(item) {
			
				if(item.link){
					uni.switchTab({
						url: item.link,
						success() {
							
						},fail(err) {
							if(err.msg='switchTab:fail can not switch to no-tabBar page'){
								uni.navigateTo({
									url:item.link
								})
							}
							
						}
					})
				}else{
			         this.$u.toast('功能开发中')
				}
				
				// this.SET_CLASS(item)
				
			},
			go(e) {
				uni.navigateTo({
					url: e
				})
			},
			search() {
				uni.switchTab({
					url: '/pages/findWork/index'
				})
			},
			more() {
				uni.switchTab({
					url: '/pages/findWork/index'
				})
			},
			getjob() {
				this.$u.post('/index/job', {
					type: this.type
				}).then(res => {
					this.list = res;
					this.loading=false;
				}).catch(err => {})
			},
			getBanner() {
				this.$u.post('/index/banner', {}).then(res => {
					this.banner = res;
				}).catch(err => {})
			},
			getClassify() {
				this.$u.post('/index/mf', {}).then(res => {
					this.Classifty = res;
				}).catch(err => {})
			},


			Ccurrent(e) {
				this.current = e;
				if (e == 0) {
					this.type = 2
				}
				if (e == 1) {
					this.type = 1
				}
				this.getjob()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f1f1f1;
		padding-bottom: 40rpx;
		min-height: 100vh;
	}

	.top {
		background: #3C97FF;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			background: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			width: 550rpx;
		}

		.shu {
			width: 4rpx;
			height: 30rpx;
			background: #e1e1e1;
			display: block;
			margin: 0 20rpx;
		}
	}
</style>
